<!--
 * @Author: lixb
 * @Date: 2020-08-19 10:07:37
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2020-09-22 11:14:17
 * @Descripttion: 日历
-->
<template>
  <div>
    <el-card class="box-card calendar-card">
      <el-row :gutter="10">
        <el-col :span="20" :gutter="15">
          <div class="calendar">
            <calendar
              ref="calendar"
              :zero="calendar.zero"
              :lunar="calendar.lunar"
              :value="calendar.value"
              :begin="calendar.begin"
              :end="calendar.end"
              @next="switchMonth"
              @prev="switchMonth"
              @getLunarInfo="getLunarInfo"
              @select="calendar.select"
              @showCard="showCard"
            ></calendar>
          </div>
        </el-col>
        <el-col :span="4">
          <el-card class="box-card important-card">
            <div class="text item">
              <div class="festive">本月重要节气</div>
              <ul class="festive-list">
                <li v-for="(item, index) in festivalList" :key="index">
                  <span style="color: #604AFF;font-weight: bold;font-size: 20px;">·</span>
                  {{ item }}
                </li>
              </ul>
              <wf-el-auth-button
                type="primary"
                auth-key="WALFARE-JRRL-SFL"
                style="background: #EA6151;border: none;"
                @click="goHandout()"
              >
                送福利
              </wf-el-auth-button>
              <br />
              <el-button type="primary" @click="showCard()">贺卡祝福</el-button>
            </div>
          </el-card>
          <el-card class="box-card today-birthday">
            <div class="main-text" @click="goBirthdayParty()">
              <div>{{ `${new Date().getMonth() + 1}月${new Date().getDate()}日` }}</div>
              <div style="font-weight: bold;margin-top: 15px;">
                {{ `今天生日${birthdayNum}人` }}
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
    <greetCardBless :is-open="isOpen" @closeDrawer="closeDrawer"></greetCardBless>
  </div>
</template>

<script>
  import greetCardBless from '@/components/greetCardBless/index.vue'; //贺卡祝福
  import calendar from '@/views/festivalCalendar/calendar/calendar.vue'; //日历
  import { getPlayOnNow } from '@/api/festivalCalendar';
  export default {
    components: {
      calendar,
      greetCardBless,
    },
    data() {
      return {
        birthdayNum: '',
        isOpen: false,
        cMonth: '', //当前月
        cYear: '', //当前年
        festivalList: [],
        lunarInfoArr: [],
        calendar: {
          show: false,
          zero: true,
          value: [], //默认日期
          lunar: true, //显示农历
          select: value => {
            this.calendar.value = value;
          },
        },
      };
    },
    watch: {
      cMonth() {
        this.lunarInfoArr = [];
      },
      cYear() {
        this.lunarInfoArr = [];
      },
    },
    activated() {
      this.switchMonth(new Date().getMonth() + 1);
      this.getBirthdayByToday();
    },
    methods: {
      goHandout() {
        this.$router.push('/careCard/distribute');
      },
      goBirthdayParty() {
        this.$router.push('/birthdayParty/index');
      },
      showCard() {
        this.isOpen = true;
      },
      /**
       * @Author: lixb
       * @Date: 2020-08-26 15:39:19
       * @msg: 选择月份时，截取节日日期的月份部分等于本月时，拿到节日名称push到数组中渲染
       */
      switchMonth(m, y) {
        this.cMonth = m;
        this.cYear = y;
        this.festivalList = [];
        let gregorianFestivalArr = Object.keys(this.$refs.calendar.festival.gregorian);
        for (var item in gregorianFestivalArr) {
          if (m == gregorianFestivalArr[item].split('-')[0]) {
            this.festivalList.push(
              this.$refs.calendar.festival.gregorian[gregorianFestivalArr[item]]
            );
          }
        }
        let lunarFestivalArr = Object.keys(this.$refs.calendar.festival.lunar);
        for (var l in lunarFestivalArr) {
          for (var t in this.lunarInfoArr) {
            if (lunarFestivalArr[l] == this.lunarInfoArr[t]) {
              this.festivalList.push(this.$refs.calendar.festival.lunar[lunarFestivalArr[l]]);
            }
          }
        }
      },
      getBirthdayByToday() {
        let month = new Date().getMonth() + 1;
        let day = new Date().getDate();
        getPlayOnNow(month, day).then(res => {
          if (res.status == 200) {
            this.birthdayNum = res.data;
          } else {
            this.$message.error(`获取今天生日人数失败，原因：${res.message}`);
          }
        });
      },
      // eslint-disable-next-line no-unused-vars
      getLunarInfo(val) {
        this.lunarInfoArr.push(val);
      },
      closeDrawer() {
        this.isOpen = false;
      },
    },
  };
</script>

<style lang="scss" scoped>
  .calendar {
    background: #fff;
    border-radius: 2px;
  }
  .important-card {
    margin-top: 40px;
    .el-button {
      margin-top: 10px;
    }
  }
  .calendar-card {
    position: relative;
    border-radius: 10px;
    margin-top: 10px;
    .festive {
      font-weight: bold;
      font-size: 14px;
    }
    .festive-list {
      list-style: none;
      font-size: 12px;
      padding: 0;
      li {
        margin-top: 5px;
      }
    }
    .festive-img {
      position: absolute;
      bottom: 0;
      right: 0;
    }
    .today-birthday {
      margin-top: 20px;
      cursor: pointer;
    }
    .main-text {
      text-align: center;
    }
  }
</style>
